﻿<%@ Page Title="" Language="C#" MasterPageFile="~/TitleLayout.master" %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="LeftContent" runat="Server">
    <div style="margin-bottom: 10px;">
        <asp:Image ID="Image3" runat="server" ImageUrl="~/Resizable/Images/ui_text_resizable.gif">
        </asp:Image></div>
    <DotNetAge:Accordion ID="Accordion1" runat="server" SkinID="Black-Ice" Animated="bounceslide">
        <Views>
            <DotNetAge:NavView ID="Nav1" runat="server" Text="Feature Examples" Target="demoFrame">
                <Items>
                    <DotNetAge:NavItem Text="Core Features" NavigateUrl="~/Resizable/Core.aspx" />
                    <DotNetAge:NavItem Text="Preserve aspect ratio" NavigateUrl="~/Resizable/PreserveAspectRatio.aspx" />
                    <DotNetAge:NavItem Text="Maximum/minimum size" NavigateUrl="~/Resizable/Resizing.aspx" />
                    <DotNetAge:NavItem Text="Constrain resize area" NavigateUrl="~/Resizable/ConstrainResizeArea.aspx" />
                    <DotNetAge:NavItem Text="Delay start" NavigateUrl="~/Resizable/DelayStart.aspx" />
                    <DotNetAge:NavItem Text="Snap to grid" NavigateUrl="~/Resizable/SnapToGrid.aspx" />
                    <DotNetAge:NavItem Text="Show semi-transparent" NavigateUrl="~/Resizable/Ghost.aspx" />
                    <DotNetAge:NavItem Text="Synchronous size" NavigateUrl="~/Resizable/SynchronousSize.aspx" />
                    <DotNetAge:NavItem Text="Animate" NavigateUrl="~/Resizable/Animate.aspx" />
                                        <DotNetAge:NavItem Text="Programmatic creation" NavigateUrl="~/Resizable/ProgrammaticCreation.aspx" />

                </Items>
            </DotNetAge:NavView>
        </Views>
    </DotNetAge:Accordion>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MiddleContent" runat="Server">
    <iframe frameborder="0" style="height: 600px; width: 100%" name="demoFrame" scrolling="no"
        src="Core.aspx"></iframe>
    <DotNetAge:Tabs ID="Tabs1" runat="server">
      <Animations>
            <DotNetAge:AnimationAttribute AnimationType="opacity" Value="toggle" />
            <DotNetAge:AnimationAttribute AnimationType="height" Value="toggle" />
        </Animations>
        <Views>
            <DotNetAge:View Text="Overview" runat="server" ID="overView">
                <p>
                    Resizable is a ASP.NET WebControl that encapsulat the jQuery UI resizable plugin
                    makes selected WebControls/Html Elements resizable (meaning they have draggable
                    resize handles). You can specify one or more handles as well as min and max width
                    and height.
                </p>
                <p>
                    All ClientEvents (OnClientResizeStart,OnClientResizeStop,OnClientResize) receive
                    two arguments: The original browser event and a prepared ui object. The ui object
                    has the following fields:
                </p>
                <ul>
                    <li>ui.helper - a jQuery object containing the helper element</li>
                    <li>ui.originalPosition - {top, left} before resizing started</li>
                    <li>ui.originalSize - {width, height} before resizing started</li>
                    <li>ui.position - {top, left} current position * ui.size - {width, height} current size</li></ul>
            </DotNetAge:View>
            <DotNetAge:View Text="Properties" runat="server" ID="propertyView">
                <p>
                    The Resize control 's properties is show below</p>
                <div style="border: 1px dashed #808080;">
                    <demo:Code runat="server" ID="quickDemo">
                        <CodeTemplate>
    <DotNetAge:Resizable ID="MyResizable"
          AnimateDuration="1000"
          AnimateEasing="swing"
          AspectRatio="0.7"
          AutoHide="true"
          Container="Parent"
          EnabledAnimation="true"
          Handles="e, s, se"
          HelperCssClass="ui-state-highlight"
          MaxHeight="0"
          MinHeight="0"
          MaxWidth="0"
          MinWidth="0"
          OnClientResize="javascript here."
          OnClientResizeStart=""
          OnClientResizeStop=""
          ResizeStartDelay="1000"
          ResizeStartDistance="10"
          ShowSemiTransparentHelper="true"
          SnapX="20"
          SnapY="20"
    >
          <Target TargetIDs="ControlID1, ... ,ControlIDn" 
                     Selector=".ui-widget-header" TargetID="ControlID" />
          <AlsoResize />
          <ContainsIn />
          <DisableResizableElements />
    </DotNetAge:Resizable>
                        </CodeTemplate>
                    </demo:Code>
                </div>
            </DotNetAge:View>
        </Views>
    </DotNetAge:Tabs>
</asp:Content>
